<template>
  <div class="table">
      <el-table :data="tableData" :header-cell-style="{background: '#f5f7fa',color:'#333333 '}" border style="width: 100%">
          <el-table-column prop="course.title" align="center" label="课程名称" />
          <el-table-column prop="paper.title" align="center" label="试卷标题" />
          <el-table-column prop="paper.points" align="center" label="总分" />
          <el-table-column prop="paper.pass" align="center" label="及格分" />
          <el-table-column label="答题人数" align="center">
              <template v-if="scope.row.paper !== null" slot-scope="scope">
                {{ scope.row.paper.examination.length }}
              </template>
          </el-table-column>
          <el-table-column label="及格率" align="center">
              <template v-if="scope.row.paper !== null" slot-scope="scope">
                  <span v-if=" isNaN(scope.row.paper.pass_count / scope.row.paper.examination.length)">0%</span>
                  <span v-else>{{ Math.round(scope.row.paper.pass_count / scope.row.paper.examination.length*100) }}%</span>
              </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <span class="action" @click="handleCourse(scope.row)">查看</span>
              </template>
          </el-table-column>
      </el-table>
  </div>
</template>
<script>
export default {
  props: {
      tableData: {
          type: Array,
          required: true
      }
  },
  data() {
      return {
      }
  },
  created() {
  },
  methods: {
      handleCourse(row) {
          console.log(row,123456);
          this.$router.push({
          path: `/examination/detail?course_id=${row?.course.id}&paper_id=${row.paper.id}`
          })
      }
  }
}
</script>
<style lang="scss" scoped>
.table {
  // margin-top: 20px;
  padding: 0 20px;
}
.action{
  padding: 0 10px;
  color:#2F88FF;
  cursor: pointer;
}
</style>